<template>
<!--  开屏页-->
  <div class="index-container" :class="$store.state.modules.settings.themeClass">
    <div class="head-select">
      <el-dropdown trigger="click"  @command="handleCommand">
        <span class="el-dropdown-link">
          主题选择<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in themeList" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div>
      <img width="180" height="180"
        style="border-radius: 50%;object-fit: fill"
        src="@/static/index.png" alt="初意">
      <h1>
        <el-button type="text" class="title" @click="refresh">
          初意
        </el-button>
      </h1>
      <span class="remarkFont" style="width: 33%;">Java学习笔记，面试突击宝典，主要来源于B站上视频的学习，同时会记录平时一些学习和项目中遇到的问题，同步更新在初意，如果对我的个人网站感兴趣的话，欢迎关注我的 初意项目 笔记主要涵盖：Java，Spring，SpringCloud，计算机网络，操作系统，数据结构，Vue等 如果笔记对您有帮助的话，欢迎star支持，谢谢~</span>
      <div class="links">
        <a href="https://gitee.com/hxd_12138/original-favor/" target="_blank" rel="noopener noreferrer" class="button--green">
          Gitee
        </a>
<!--        target="_blank" 新开窗口-->
<!--        nuxt中：<nuxt-link> 的作用和 <router-link> 一致，经我测试跳转效果一毛一样-->
        <nuxt-link rel="noopener noreferrer" class="button--grey" to="./login">
          开始出发
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import {INDEX_THEME_ENUM} from "../config/myEnum";

export default {
  name : "index",
  head() {
    return {
      title: "初意",
      meta: [
        {hid: 'description', name: 'about', content: '初意'}
      ]
    }
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      themeClass: 'default',
      themeList: []
    };
  },
  mounted() {
    this.themeList = INDEX_THEME_ENUM
  },
  methods: {
    refresh() {
      location.reload();
    },
    handleCommand(command) {
      this.$store.commit('modules/CHANGE_THEME', command)
    }
  }
}
</script>

<style lang="scss">
  .index-container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    .head-select {
      position: absolute;
      top: 15px;
      right: 15px;
    }
    /*不同的光标*/
    .el-dropdown-link {
      cursor: pointer;
      color: #35495e;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .title {
      font-family:
        'Quicksand',
        'Source Sans Pro',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;
      display: inline-block;
      font-weight: 300;
      font-size: 50px;
      color: #35495e;
      letter-spacing: 1px;
      margin: .625rem 0 2.5rem;
      /*去除a标签下划线*/
      text-decoration: none;
    }

    .title:hover {
      color: #35495e;
    }

    .subtitle {
      font-weight: 300;
      font-size: 42px;
      color: #526488;
      word-spacing: 5px;
      padding-bottom: 15px;
    }

    .links {
      padding-top: 15px;
    }
  }
</style>
